<!-- 发布通知 -->

<script setup>
import { reactive, toRefs, ref, watch } from 'vue';
import { ElDialog, ElForm, ElButton, ElInput, ElFormItem, ElSelect, ElOption, ElMessage, ElTag } from 'element-plus';
import CommonGroupByDept from '@/common/CommonGroupByDept.vue';
import CommonUploadFiles from '@/common/CommonUploadFiles.vue';
import CommonUploadPictures from '../../common/CommonUploadPictures.vue';

const props = defineProps({
  addShowDialog: Boolean,
});
const { addShowDialog } = toRefs(props);
const emit = defineEmits(['handleAddDialog']);
const accept = ref('.doc,.docx,.pdf,.xls,.xlsx');
const acceptImage = ref('.JPG,.JPEG,.PNG,.BMP');
const btnLoading = ref(false);

const deptDialogShow = ref(false);

const userInfoArr = ref([]);

const formRef = ref(null);

const formInline = reactive({
  title: '',
  content: '',
  type: '',
  userIds: [],
  picture: [],
  annex: [],
});

const rules = {
  title: [
    {
      required: true,
      message: '请输入标题',
      trigger: 'blur',
    },
  ],

  content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
  type: [{ required: true, message: '请选择发送的人', trigger: 'blur' }],
};

watch(
  addShowDialog,
  (val) => {
    if (val) {
      formInline.annex = [];
      formInline.picture = [];
      formInline.userIds = [];
      formInline.type = '';
      formInline.content = '';
      formInline.title = '';
    }
  },
  { deep: true },
);

// 获取指定人员数据
const handleDeptInfo = (arr) => {
  userInfoArr.value = arr;

  if (arr.length) {
    formInline.userIds = arr.map((item) => {
      return item.id;
    });
  } else {
    formInline.userIds = [];
  }

  deptDialogShow.value = false;
};

const closeDeptDialog = () => {
  deptDialogShow.value = false;
};

const closeAddDialog = () => {
  userInfoArr.value = [];

  emit('handleAddDialog', false);
};

const getFileList = async () => {
  // ! 上传文件
  // const [err, data] = await fireUpload({
  //   files: [uploadFile.raw],
  // });
  // if (!err) {
  //   formInline.annex.push({ uid: uploadFile.uid, ...data.data[0] });
  // } else {
  //   ElMessage.error(err);
  // }
};

const getFileListImage = async () => {
  // const [err, data] = await fireUpload({
  //   files: [uploadFile.raw],
  // });
  // if (!err) {
  //   formInline.picture.push({ uid: uploadFile.uid, ...data.data[0] });
  // } else {
  //   ElMessage.error(err);
  // }
};

const OnChangeType = (e) => {
  userInfoArr.value = [];

  if (e == 'MANY') {
    deptDialogShow.value = true;
  } else {
    deptDialogShow.value = false;
  }
};

// 删除上传的图片
const getFileListRemove = async () => {
  // const removeItem = formInline.picture.filter((i) => i.uid === uploadFile.uid)[0];
  // formInline.picture = toRaw(formInline.picture).filter((i) => i.uid != uploadFile.uid);
  // const [err, data] = await fireDel({
  //   object: removeItem.object,
  // });
  // if (!err) {
  //   ElMessage.success(data && '取消上传照片');
  // } else {
  //   ElMessage.error(err);
  // }
};

// 删除上传的附件
const getFilesListRemove = async () => {
  // const removeItem = formInline.annex.filter((i) => i.uid === uploadFile.uid)[0];
  // formInline.annex = toRaw(formInline.annex).filter((i) => i.uid != uploadFile.uid);
  // !删除附件Api
  // const [err, data] = await fireDel({
  //   object: removeItem.object,
  // });
  // if (!err) {
  //   ElMessage.success(data && '取消上传照片');
  // } else {
  //   ElMessage.error(err);
  // }
};

const handleSaveNotification = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      if (formInline.type == 'ALL') {
        // const body = {
        //   title: formInline.title,
        //   content: formInline.content,
        //   type: formInline.type,
        //   picture: toRaw(formInline.picture),
        //   annex: toRaw(formInline.annex),
        // };
        //! 创建通知Api
      } else {
        if (!formInline.userIds.length) {
          ElMessage.warning('请选择指定发给的人员！');

          return;
        }

        // const body = {
        //   title: formInline.title,
        //   content: formInline.content,
        //   type: formInline.type,
        //   picture: toRaw(formInline.picture),
        //   annex: toRaw(formInline.annex),
        //   userIds: toRaw(formInline.userIds),
        // };
        //! 创建通知Api
        // const [err] = await notificationPost(body);
      }
    }
  });
};
</script>
<template>
  <div class="add_notification">
    <ElDialog
      title="添加通知"
      :close-on-click-modal="false"
      destroy-on-close
      draggable
      top="115px"
      :model-value="addShowDialog"
      :align-center="true"
      @close="closeAddDialog()"
    >
      <main>
        <ElForm ref="formRef" label-position="right" label-width="90px" :rules="rules" :model="formInline">
          <ElFormItem label="标题" prop="title">
            <ElInput v-model.trim="formInline.title" placeholder="请输入标题" maxlength="40" />
          </ElFormItem>
          <ElFormItem label="内容" prop="content">
            <ElInput
              v-model.trim="formInline.content"
              placeholder="请输入内容"
              maxlength="500"
              type="textarea"
              show-word-limit
            />
          </ElFormItem>
          <ElFormItem label="发送给" prop="type">
            <div class="btn_c">
              <ElSelect v-model="formInline.type" placeholder="请选择" @change="(e) => OnChangeType(e)">
                <ElOption label="所有人" value="ALL" />
                <ElOption label="个别人" value="MANY" />
              </ElSelect>
              <ElButton :disabled="formInline.type !== 'MANY'" @click="deptDialogShow = true">选择人员</ElButton>
            </div>
          </ElFormItem>

          <ElFormItem v-if="formInline.type == 'MANY'" label="人员" class="lestStyle_c_jx">
            <div class="user_list_box">
              <ElTag v-for="item in userInfoArr" :key="item.id" class="ml-2" type="success">{{ item.username }}</ElTag>
            </div>
          </ElFormItem>

          <ElFormItem label="添加照片">
            <CommonUploadPictures
              :limit="9"
              :accept="acceptImage"
              :file-list="[]"
              :desc="'格式：jpg、jpeg、png、bmp;最多上传9张,单个最大不超过10MB'"
              @get-file-list="getFileListImage($event)"
              @get-file-list-remove="getFileListRemove"
            />
          </ElFormItem>

          <ElFormItem label="文档附件">
            <CommonUploadFiles
              :limit="5"
              :accept="accept"
              :file-list="[]"
              :desc="'格式：xls、xlsx、doc、docx、pdf,最多上传5个,单个最大不超过50MB'"
              @get-file-list="getFileList($event)"
              @get-files-list-remove="getFilesListRemove"
            />
          </ElFormItem>
        </ElForm>
      </main>
      <div class="dialog-footer">
        <ElButton @click="closeAddDialog()">取消</ElButton>
        <ElButton type="primary" :loading="btnLoading" @click="handleSaveNotification()">确定</ElButton>
      </div>
    </ElDialog>

    <!-- 人员组织架构 -->
    <CommonGroupByDept
      :dept-dialog-show="deptDialogShow"
      :user-info-arr="userInfoArr"
      @handle-dept-info="handleDeptInfo"
      @close-dept-dialog="closeDeptDialog"
    />
  </div>
</template>

<style scoped lang="scss">
.add_notification {
  :deep(.el-dialog) {
    width: 820px;
    border-radius: 10px;
  }
}
:deep(.el-dialog .el-dialog__header) {
  color: #565656;
  font-weight: 700;
  font-size: 16px;
  border-bottom: 1px solid #f8f8f8;
}

main {
  max-height: 700px;
  overflow: auto;
  font-size: 18px;
  &::-webkit-scrollbar {
    display: none;
    width: 0 !important;
  }

  :deep(.el-form-item__label) {
    font-size: 16px;
  }

  :deep(.el-form-item) {
    position: relative;
  }
}

.user_list_box {
  :deep(.el-tag) {
    margin-left: 8px;
  }
}

.btn_c {
  display: flex;

  :deep(.el-input) {
    width: 560px;
  }
  :deep(.el-button) {
    height: 40px;
  }
}

:deep(.el-input) {
  width: 650px;
  height: 40px;
  border-radius: 4px;
}

:deep(.el-textarea__inner) {
  width: 650px !important;
}

:deep(.el-textarea .el-input__count) {
  right: 45px;
}
.dialog-footer {
  margin-top: 46px;
  margin-right: 53px;
  text-align: right;

  :deep(.el-button) {
    width: 126px;
    height: 36px;
    color: #377bf0;
    border-color: #377bf0;
    border-radius: 4px;
  }
  :deep(.el-button--primary) {
    color: #ffffff;
  }
}
:deep(.el-button:focus, .el-button:hover) {
  color: #377bf0;
  background: #ffffff;
  border-color: #377bf0;
}

:deep(.el-upload__tip) {
  position: relative !important;
  top: 28px !important;
  left: -32px !important;
  width: 515px !important;
}

:deep(.el-upload-list) {
  top: 20px !important;
}

:deep(.el-upload__tip_img) {
  top: 39px !important;
  left: 2px !important;
  display: revert !important;
}

.lestStyle_c_jx::before {
  content: '*' !important;
  position: absolute;
  top: 5px;
  left: 50px;
  margin-right: 3px;
  color: #f56f6f !important;
  font-size: 16px;
}
</style>
